<template>
  <div>
    <van-nav-bar
      title="学习模式"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <div style="padding: 6px;margin-top: 10px">
      <div style="font-size: 18px;line-height: 24px;margin-bottom: 10px;">{{question[num-1].title}}</div>
      <div class="options">
      <van-button class="opt" size="large" v-for="opt in question[num-1].options" :key="opt" :type="question[num-1].answer.indexOf(opt.substr(0,1)) > -1 ? 'info' : 'default'">
        {{opt}}
      </van-button>
      </div>

      <div style="text-align: center;position: fixed;left: 0;right: 0;bottom: 10px;">
        <van-button type="primary" @click="pre">&lt; 上一题</van-button>
        <van-field v-model="num" type="digit" input-align="center" maxlength="3" @change="chg" style="width: 60px;display: inline-block;vertical-align: middle;font-size: 16px;padding: 10px" /> 
        /
        <span style="display:inline-block; margin:0 20px 0 10px">{{question.length}}</span>
        <van-button type="primary" @click="next">下一题 &gt;</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import question from '../question.json'
export default {
  data () {
    return {
      question: question,
      num: 1,
    }
  },
  created () {
    this.num = localStorage['num'] ? localStorage['num'] : 1
    if (this.num < 1) this.num = 1
    if (this.num > question.length) this.num = question.length
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    pre () {
      this.num--
      if (this.num < 1) {
        this.num = 1
      }
      this.chg()
    },
    next () {
      this.num++
      if (this.num > this.question.length) {
        this.num = this.question.length
      }
      this.chg()
    },
    chg () {
      localStorage['num'] = this.num
    }
  }
}
</script>
<style scoped>
.opt {
  text-align: left;
  margin-bottom: 10px;

}
.options .van-button__content{
  justify-content: left;
  padding-left: 10px;
}

</style>